import React, {
    Component
} from 'react'
import {
    connect
} from 'react-redux'

import Carousel from './carousel'
import Oprate from './oprate'
import Tabs from './tabs'
import MoreInformation from './moreInformation'
import CountDown from './CountDown'

var _affix = require('antd/lib/affix');


class Index extends Component {

    render() {
        return (
            <div className="detail-mb-con">
                {(!this.props.detail.detailData.shopId || this.props.detail.detailData.published == 'stop') ? <div className="published-stop"><img src="../../../static/img/nonexistent.png" alt=""/><div>Sorry, this item has been removed.</div></div> : <div>
                        <div className={`top-con ${this.props.isFb ?'isFb':''}`}>
                            <Carousel image_list={this.props.detail.detailData.imageList || []}></Carousel>
                            <Oprate></Oprate>
                        </div>
                        <div>
                            {
                                this.props.detail.detailData?
                                    <Tabs data={this.props.detail.detailData} commentListData={this.props.detail.commentListMobile||{}}></Tabs>:null
                            }
                        </div>
                    </div> }

                <MoreInformation />
                <div>
                    {
                        (this.props.detail.detailData.discount && this.props.detail.detailData.discount.duration>0)?(
                                <_affix offsetBottom={0}>
                                    <CountDown  time={this.props.detail.detailData.discount.duration}></CountDown>
                                </_affix>
                            ):null
                    }
                </div>

            </div>
        )



    }
}

const mapStateToProps = ({
    detail
}) => ({
    detail
});

const mapDispatchToProps = (dispatch) => {
    return {

    }
};

export default connect(mapStateToProps, mapDispatchToProps)(Index)